<template>
	<view class="containerbox">
		<uv-navbar title="立即购买" auto-back placeholder />
		<scroll-view scrollY class="containerbox">
			<view class="relative">
				<image class="w-full" mode="widthFix" style="height: 480rpx;" :src="detail.param?.buyImages[0].url"></image>
			</view>
			<view class="bg-white px-20 mx-20 rd-12 pb-30 relative" style="margin-top: -70rpx; z-index: 1;">
				<image class="absolute" :src="detail.param?.buyImages[1].url" mode="widthFix" style="width: 260rpx; height: 290rpx; top: -220rpx; right: 24rpx;"></image>
				<view class="px-20 pt-30 pb-10 text-primary text-34 font-700">英语体验课</view>
				<view class="pt-40">
					<view class="text-30">孩子姓名</view>
					<input class="inputbox" v-model="formdata.userName" type="text" placeholder="请输入孩子姓名" placeholder-class="text-999">
				</view>
				<view class="pt-40">
					<view class="text-30">手机号</view>
					<input class="inputbox" v-model="formdata.mobile" type="number" placeholder="请输入手机号" placeholder-class="text-999">
				</view>
				<view class="pt-40">
					<view class="text-30">学生年级</view>
					<view class="inputbox" :class="{'text-999': !formdata.gradename}" @click="gradeStatus = true">{{formdata.gradename || '请选择年级'}}</view>
					<!-- <input class="inputbox" v-model="formdata.grade" type="text" placeholder="请输入学生年级" placeholder-class="text-999"> -->
				</view>
				<view class="pt-40">
					<view class="text-30">目前英语分数</view>
					<input class="inputbox" v-model="formdata.englishScore" type="number" placeholder="请输入目前英语分数" placeholder-class="text-999">
				</view>
				<view class="pt-40">
					<view class="text-30">期望上课时间</view>
					<view class="inputbox" @click="trialDatetimePicker.open()">
						<text class="text-333" v-if="formdata.trialDate">{{formdata.trialDate}}</text>
						<text class="text-999" v-else>请选择期望上课时间</text>
					</view>
				</view>
				<view class="mt-20"><text class="text-red text-24">*</text><text class="text-22 text-gray-80">登录密码为手机号后六位</text></view>
				<view @click="gobuyEvent" class="rd-50 bgc-primary m-auto text-white h-70 w-500 text-28 flex items-center justify-center" style="margin-top: 30rpx;">去购买</view>
			</view>
			<view class="text-24 mt-20 text-center text-primary pb-40">快速掌握英语单词，让你提升英语成绩，成为学霸你也可以！</view>
		</scroll-view>
		<uv-datetime-picker ref="trialDatetimePicker" mode="datetime" :filter="filter" :formatter="formatter" @confirm="trialDateConfirm" round="32rpx" />
		<c_grade v-model="gradeStatus" @confim="gradeEvent"/>
		<uv-popup mode="center" ref="popupRef" bgColor="transparent">
			<view class="relative">
				<image :src="`${$imageBaseUrl}/orderbg.png`" style="width: 600rpx; height: 650rpx;" mode="widthFix"></image>
				<view class="text-center absolute flex flex-col items-center pt-60" style="width: 100%; height: 100%; left: 0; top: 0;">
					<image mode="widthFix" style="width: 354rpx; height: 222rpx;" :src="`${$imageBaseUrl}/orderstatus.png`"></image>
					<view class="text-36 mt-40">购买成功</view>
					<view class="text-30">已购买体验课，等待上课吧</view>
					<view class="btn mt-60" @click="backEvent">返回</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { product_api, suborder_api,payment_api } from '@/common/apis/other'
import { onLoad } from "@dcloudio/uni-app"
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js'
import c_grade from './components/upGrade.vue'

const trialDatetimePicker = ref()

const formdata = reactive({
	buyType: 1,
	userName: '',
	mobile: '',
	gradeId: '',
	englishScore: '',
	trialDate: '',
	gradename: '',
	quantity: 1,
	paymentMethod: 3
})
const detail = ref({})
const agentId = ref()
onLoad(async (o) => {
	console.log(o)
	if(o.agentId){
		agentId.value = o.agentId
	}
	detail.value = await product_api({id: o.id})
	uni.login({
		provider: 'weixin', //使用微信登录
		success: async (loginRes) => {
			console.log('code:', loginRes)
		}
	})
})

const gradeStatus = ref(false)

function gradeEvent(data){
	formdata.gradeId = data.id
	formdata.gradename = data.name
	console.log(data)
}

function trialDateConfirm(data){
	console.log(data)
	formdata.trialDate = timeFormat(data.value, 'yyyy-mm-dd hh:MM')
}

const popupRef = ref()
function backEvent(){
	uni.navigateBack()
}

function filter(type, options){
	if (type === 'year') {
		const currentYear = new Date().getFullYear();  
		const filteredYears = options.filter(year => parseInt(year, 10) >= currentYear);  
		return filteredYears
	}
	return options;
}

function formatter(type, value) {
	if (type === 'year') {
		return `${value}年`
	}
	if (type === 'month') {
		return `${value}月`
	}
	if (type === 'day') {
		return `${value}日`
	}
	if(type === 'hour'){
		return `${value}时`
	}
	if(type === 'minute'){
		return `${value}分`
	}
	return value
}

async function gobuyEvent(){
	
	// #ifdef MP-WEIXIN
	console.log(formdata)
	if(agentId.value){
		formdata.agentId = agentId.value
	}
	uni.login({
		provider: 'weixin', //使用微信登录
		success: async (loginRes) => {
			let res = await suborder_api(formdata)
			let order = await payment_api({
				transactionCodes: [res.code],
				terminal: 2,
				weChatCode: loginRes.code,
				paymentMethod: 3
			})
			uni.requestPayment({
				provider: 'wxpay',
				timeStamp: order.payment.timeStamp,
				nonceStr: order.payment.nonceStr,
				package: order.payment.package,
				signType: order.payment.signType,
				paySign: order.payment.paySign,
				success: (res) => {
					console.log(res)
					popupRef.value.open()
				}
			})
			
		}
	});
	
	// uni.requestPayment({
	// 	provider: 'wxpay',
		
	// })
	// await payment_api({
	// 	transactionCodes: res.code,
	// 	terminal: 2,
	// 	weChatCode: 
	// })
	// #endif
	
	// #ifdef APP
	uni.showToast({
		title: '目前只支持小程序购买'
	})
	// #endif
	
}
</script>

<style lang="scss" scoped>
.inputbox{background-color: #eef9ff; border-radius: 10rpx; height: 70rpx; line-height: 70rpx; padding: 0 20rpx; font-size: 28rpx; margin-top: 10rpx;}
.btn{width: 452rpx; height: 88rpx; background-color: $primary; color: #fff; font-size: 32rpx; text-align: center; border-radius: 20rpx; line-height: 88rpx;}
</style>